<template>
  <div class="cart-bottom-list">
    <div class="checkall">
      <check-button
        class="all"
        :isCheck="isSelectAll"
        @click.native="checkClick"
      ></check-button>
      <span> 全选</span>
    </div>
    <div class="zongji">
      <span>合计 :</span>
      {{ totalPrice }}
    </div>
    <div class="goCount">去计算({{ totalCount }})</div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton";
export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },
  methods: {
    checkClick() {
      if (this.isSelectAll) {
        this.$store.state.cartList.forEach((item) => {
          item.isChecked = false;
        });
      } else {
          this.$store.state.cartList.forEach((item) => {
          item.isChecked = true;
        });
      }
    },
  },
  mounted() {},
  computed: {
    totalPrice() {
      let PriceArr = this.$store.state.cartList.filter((item) => {
        return item.isChecked === true;
      });
      let TPrice = 0;
      for (let i = 0; i < PriceArr.length; i++) {
        TPrice += PriceArr[i].price * PriceArr[i].count;
      }
      return TPrice.toFixed(2);
    },
    totalCount() {
      return this.$store.state.cartList.filter((item) => {
        return item.isChecked === true;
      }).length;
    },
    isSelectAll() {
      if (this.$store.state.cartList.length == 0) {
        return false;
      } else {
        return !this.$store.state.cartList.some((item) => {
          return item.isChecked == false;
        });
      }
    },
  },
};
</script>

<style scoped>
.cart-bottom-list {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #eee;
  font-size: 16px;
  text-align: center;
}
.checkall {
  display: flex;
  width: 60px;
  align-items: center;
  margin-left: 10px;
}
.all {
  margin-right: 5px;
  line-height: 30px;
}
.goCount {
  width: 90px;
  background-color: red;
  color: #fff;
  height: 40px;
  line-height: 40px;
}
.zongji {
  flex: 1;
}
</style>